<template>
  <div class="box">
    <swiper
      :loop="true"
      slidesPerView="auto"
      :autoplay="{
        delay: 3000, // 自动轮播间隔时间，单位为毫秒
        disableOnInteraction: false, // 用户操作后是否停止自动轮播
      }"
      :pagination="{
        clickable: true,
      }"
      :modules="modules"
      class="view-box-context"
    >
      <swiper-slide v-for="(item, index) in compInfo" :key="index">
        <img class="img" :src="item" alt="" />
      </swiper-slide>
    </swiper>
  </div>
</template>
<script lang="ts" setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, Pagination } from "swiper/modules";
import "swiper/css/bundle";
const modules = [Autoplay, Pagination];
defineProps<{
  compInfo: string[];
}>();
</script>
<style lang="stylus" scoped>
.box{
  width:1080px;
  margin:0 auto;
}
.img{
    width:100%;
    display block
}
.about-box{
    display flex;
    justify-content flex-start;
    align-items flex-start;
    .imgs{
        width: 502px
    }
    .l-box{
        padding 63px 0 0 58px
        text-align: center;
        .logo-img{
            width: 129px;
            display:block;
            margin:0 auto;
            margin-bottom 44px
        }
        .title{
            font-size: 30px;
            margin-bottom 23px
        }
        .content{
            font-size: 13px;
            color: #333333;
            margin-bottom 18px
        }
    }
    .r-box{
      .imgs{
        margin-left 68px
      }
    }
}
.about-box-2{
    display flex;
    justify-content flex-start;
    align-items center;
    background #424041;
  .l-box{
    .imgs{
      width: 579px
    }
  }
  .r-box{
    height 100%;
    padding-left 58px
    .title{
      font-weight: 300;
      font-size: 22px;
      color: #fff;
      margin-bottom  40px
    }
    .content{
      font-weight: 300;
      font-size: 14px;
      color: #fff;
      line-height: 20px;
      margin-right 62px
    }
  }
}
</style>
